<template>
    <div id="hotCenter_hwzx_index_" class="container-fluid padding">
        <form action="">
            <fieldset class="layui-elem-field site-demo-button">
                <legend>操作</legend>
                <div style="padding: 0px 10px 10px" action="">
                    <el-button type="warning" class="is-round fa fa-floppy-o" :disabled="!operation.zc" @click="zc()">暂存</el-button>
                    <el-button type="primary" class="is-round fa fa-floppy-o" :disabled="!operation.bc" @click="bc()">保存</el-button>
                    <el-button type="danger" class="is-round fa fa-times" :disabled="!operation.qx" @click="qx()">取消</el-button>
                    <el-button type="primary" class="is-round fa fa-search" :disabled="!operation.cxkh" @click="cxkh()">查询客户</el-button>
                    <el-button type="primary" class="is-round fa fa-search" :disabled="!operation.cx" id="hotCenter_hwzx_index_cx" @click="cx()">查询</el-button>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field site-demo-button">
                <legend>来电情况</legend>
                <div style="padding: 2px 0px" >
                    <el-form :model="params" :rules="rules" :inline="true" ref="params" label-width="100px" class="padding">
                        <el-form-item label="来电号码" prop="ldhm">
                            <el-input v-model="params.ldhm" id="ldhm"></el-input>
                        </el-form-item>
                        <el-form-item label="媒体来源" prop="mtly">
                            <el-input v-model="params.mtly"></el-input>
                        </el-form-item>
                        <el-form-item label="被叫号码" prop="bjhm">
                            <el-input v-model="params.bjhm"></el-input>
                        </el-form-item>
                        <el-form-item label="找人原因" prop="zryy">
                            <el-select v-model="params.zryy" lay-verify="required">
                                <el-option label="" value=""></el-option>
                                <el-option v-for="item in datas['找人原因']['children']" :key="item.id" :value="item.text" :label="item.text"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="咨询产品" prop="zxcp">
                            <el-input v-model="params.zxcp"></el-input>
                        </el-form-item>
                        <el-form-item label="沟通内容" prop="gtnr">
                            <el-input type="textarea" v-model="params.gtnr" style="width: 500px"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </fieldset>
            <v-khxx ref="khxx" v-bind:shadeClose="shadeClose" v-bind:shadeOpen="shadeOpen" v-bind:searhDatas="searhDatas" v-bind:params="params"></v-khxx>
            <v-lsjlydd name="no-cache" ref="lsjlydd" v-bind:lsjlyddRefresh="lsjlyddRefresh" v-bind:params="params"></v-lsjlydd>
            <div class="layui-form-item" style="display: none">
                <div class="layui-input-block">
                    <button class="layui-btn" id="formSubmit" lay-submit lay-filter="formSubmit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <div style="display: none" id="khListContent">
            <v-kh></v-kh>
        </div>
    </div>
</template>
<script>
    import khxx from "./khxx.vue"
    import lsjlydd from "./lsjlydd.vue"
    import kh from "./kh.vue"
    export default {
        name: "hwzx",
        components:{
            'v-khxx':khxx,
            'v-lsjlydd':lsjlydd,
            'v-kh':kh,
        },
        data() {
            return {
                shadeClose:false,
                shadeOpen:false,
                searhDatas:false,
                lsjlyddRefresh:false,
                operation: {//操作,控制按钮的显示与可以操作
                    hldh: true,
                    zc: false,
                    cx: true,
                    bc: false,
                    qx: false,
                    rwb: true,
                    cxkh: true,
                },
                datas: {//字典查找
                    '找人原因': {children: {}},
                },
                params:{
                    id:"",
                    ldhm:window.destination,//来电号码
                    mtly:"",
                    bjhm:"",
                    zxcp:"",
                    zryy:"",
                    gtnr:"",
                    other:"",
                    keyup:true,//确定键按下了
                },
                rules:{
                    ldhm: [
                        { required: true, message: '请输入来电号码', trigger: 'blur' },
                    ],
                },
            }
        },
        beforeCreate: function(){
            layui.use('table')
            vue.$on('ldhm',(res)=>{//监听来电号码改变
                this.params.ldhm = res
                $("#ldhm").val(this.params.ldhm)
                this.cx()
            })
            this.$nextTick(function () {
                //点击确定按钮后发生事件查询数据，然后将其填充到数据框里面
                $('#ldhm').bind('keydown', (event)=>{
                    if (event.keyCode == "13") {
                        this.cx()
                    }
                });
                //查找字典数据，然后填充到数据框里面
                this.$message_.postTips(this,'','basic-information-system-dict/special-list',{CrmSystemDictSearch: {code_type_name: Object.keys(this.datas)}},null,(response)=>{
                    this.datas = response.data.data;
                })
            });
        },
        methods:{
            cx:function(){
                if ($("#ldhm").val().length>0){
                    this.operation = {//控制按钮状态
                        hldh:false,
                        zc:true,
                        bc:true,
                        qx:true,
                        cx:true,
                        rwb:false,
                        cxkh:true,
                    };
                    this.params.keyup = true;//表示是按键按下查找数据
                    // 回车键按下，查询数据，然后填充
                    this.shadeClose=!this.shadeClose;//通知儿子刷新数据
                    this.searhDatas=!this.searhDatas;//通知儿子刷新数据
                    this.lsjlyddRefresh=!this.lsjlyddRefresh;//通知刷新历史记录
                } else{
                    layer.msg("来电号码为空！",{icon:5})
                }
            },
            bc:function(){//保存
                this.params.other = "hwzx";
                this.save("bc")
            },
            save:function(c){
                let khxx = this.$refs['khxx'];
                let lsjlydd = this.$refs['lsjlydd'];
                let temp = "";
                if (c=='bc'){
                    temp = '保存';
                } else{
                    temp = '保存';
                }
                this.$message_.postTips(this,temp,'crm-hot-center-hwzx/'+c,{params:this.params,
                    khxx_data:khxx.saveDatas!=undefined?khxx.saveDatas:"",
                    wcjyy:lsjlydd.saveOtherDatas.wcjyy!=undefined?lsjlydd.saveOtherDatas.wcjyy:"",
                    wxyy:lsjlydd.saveOtherDatas.wxyy!=undefined?lsjlydd.saveOtherDatas.wxyy:"",
                    order:lsjlydd.saveOrderDatas!=undefined?lsjlydd.saveOrderDatas:"",
                    selectedProduct:JSON.stringify(lsjlydd.selectedProduct!=undefined?lsjlydd.selectedProduct:""),
                    lsjlyddClick:lsjlydd.lsjlyddClick!=undefined?lsjlydd.lsjlyddClick:0,
                },null,()=>{
                    if (c=="bc"){this.$message({message:"保存成功！",type:"success"})}
                    if (c=="zc"){this.$message({message:"暂存成功！",type:"success"})}
                    this.$cache_.flushCache(this)
                    this.$router.push('hwzx?'+Math.random());//刷新本路由
                })
            },
            zc:function(){//暂存
                this.params.other = "hwzx_zccl";
                this.save("zc");
            },
            qx:function(){//取消
                layer.confirm("确认是否取消该次动作！", (i)=>{
                    this.operation={
                        zc:false,
                        bc:false,
                        qx:false,
                        cx:true,
                        cxkh:true,
                    }
                    this.$refs['params'].resetFields()
                    this.$refs['khxx'].$refs['saveDatas'].resetFields()
                    layer.close(i)
                });
            },
            cxkh:function(){//查询客户
                layer.open({
                    type: 1,
                    title:'查询客户列表',
                    fixed: false, //不固定
                    maxmin: true,
                    area: ['80%', '80%'], //宽高
                    shadeClose: true,
                    content:$('#khListContent'),
                });
            },
        },
    }
</script>